<template>
  <div class="sunShine">
    <div class="sunshine-top">
      <span>
        日照分析
      </span>
      <el-popover
          class="sunshine-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="sunshine-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="sunshine-data">
      <el-form ref="sunshineData" :model="sunshineObj" label-width="90px">
        <el-form-item label="活动日期" class="date">
          <el-col :span="17">
            <el-date-picker type="date" placeholder="选择日期" v-model="sunshineObj.year" style="width: 100%;"
                            format="yyyy 年 M 月 d 日" value-format="yyyy-M-d">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动时间" class="time">
          <el-col :span="11">
            <el-time-picker placeholder="开始时间" v-model="sunshineObj.startTime"
                            style="width: 100%;" value-format="HH:mm"></el-time-picker>
          </el-col>
          <el-col :span="1" class="time-space">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="结束时间" v-model="sunshineObj.endTime"
                            style="width: 100%;" value-format="HH:mm"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="间距">
          <el-input-number v-model="sunshineObj.spacing" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item label="高度">
          <el-input-number v-model="sunshineObj.height" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item label="日照半径">
          <el-input-number v-model="sunshineObj.sphereRadius" :step="1" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="sunShine-btn">
      <el-button @click="selectSunshine()">选择区域</el-button>
      <el-button @click="delSunshine()">删除</el-button>
      <el-button @click="closeSunshine()">关闭</el-button>
      <el-button @click="saveSunshine()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import "../../css/AnalysisTools/sunshine";
</style>
<script>
/* eslint-disable */
export default {
  name: "sunShine",
  data() {
    return {
      sunshineObj: {
        year: null,
        month: null,
        day: null,
        startTime: null,
        endTime: null,
        //间距，取值范围：[任意负数~任意正数]，默认值：-1米
        spacing: -1,
        //底面高度，取值范围：[任意负数~任意正数]，默认值：0米
        groundElevation: 0,
        height: 5000,
        //日照效果球半径，取值范围：[0~任意正数]，默认值：1米
        sphereRadius: 10,
      },
    }
  },
  methods: {
    selectSunshine() {
      if (this.sunshineObj.year === null || this.sunshineObj.startTime === null || this.sunshineObj.endTime === null) {
        this.$message.warning("日期、时间填写完整且开始时间早于结束时间")
      } else if (this.sunshineObj.spacing === null || this.sunshineObj.spacing === '') {
        this.$message.warning("间距没填写")
      } else if (this.sunshineObj.height < 0) {
        this.$message.warning("高度不能为负数")
      } else if (this.sunshineObj.sphereRadius < 0) {
        this.$message.warning("日照效果球半径不能为负数")
      } else {
        const date = this.sunshineObj.year.split('-')
        let object = {
          year: parseInt(date[0]),
          month: parseInt(date[1]),
          day: parseInt(date[2]),
          startTime: this.sunshineObj.startTime,
          endTime: this.sunshineObj.endTime,
          spacing: this.sunshineObj.spacing,
          groundElevation: 0,
          height: this.sunshineObj.height,
          sphereRadius: this.sunshineObj.sphereRadius,
        }
        __g.tools.startSunshineAnalysis(object);
      }
    },
    delSunshine() {
      __g.tools.stopSunshineAnalysis();
    },
    closeSunshine() {
      this.$emit('close-popup');
      this.reloadSunshine()
    },
    reloadSunshine() {
      this.sunshineObj = {
        year: null,
        month: null,
        day: null,
        startTime: null,
        endTime: null,
        //间距，取值范围：[任意负数~任意正数]，默认值：-1米
        spacing: -1,
        //底面高度，取值范围：[任意负数~任意正数]，默认值：0米
        groundElevation: 0,
        height: 5000,
        //日照效果球半径，取值范围：[0~任意正数]，默认值：1米
        sphereRadius: 10,
      }
    },
    saveSunshine() {
      this.$message.success("开发中")
    }
  },
  mounted() {

  },
  destroy() {
    this.reloadSunshine()
  }
}

</script>